<template>
  <q-layout view="hhh LpR lFf">
    <q-header reveal elevated class="bg-primary text-white">
      <q-toolbar class="bg-light-blue-10 text-white shadow-18 rounded-borders">
          <q-toolbar-title to="/" shrink class="text-weight-bold">
            {{ title }}
          </q-toolbar-title>
      <q-space />
        <q-btn icon="home" stretch flat label="首页" @click="brownlink('https://www.56yhz.com/')">
          <q-tooltip content-class="bg-indigo" :offset="[10, 10]" content-style="font-size: 12px">
            聚商汇首页
            </q-tooltip>
        </q-btn>
        <q-btn round flat @click="brownlink('https://github.com/Singosgu')">
          <q-avatar size="26px">
            <img src="statics/icons/GitHub.png">
          </q-avatar>
          <q-tooltip content-class="bg-indigo" :offset="[10, 10]" content-style="font-size: 12px">
                GitHub链接
                </q-tooltip>
        </q-btn>
          <q-btn round flat @click="brownlink('https://gitee.com/Singosgu')">
          <q-avatar size="26px">
            <img src="statics/icons/gitee.ico">
          </q-avatar>
          <q-tooltip content-class="bg-indigo" :offset="[10, 10]" content-style="font-size: 12px">
                码云链接
                </q-tooltip>
        </q-btn>
        <q-btn icon="contact_mail" stretch flat label="联系我们" @click="contact = true">
          <q-tooltip content-class="bg-indigo" :offset="[10, 10]" content-style="font-size: 12px">
              商务合作或给我们建议
            </q-tooltip>
        </q-btn>
    </q-toolbar>
    </q-header>
    <q-page-container>
      <router-view />
        <q-page-sticky position="bottom-right" :offset="[18, 18]">
          <q-btn flat @click="brownlink('http://www.miit.gov.cn/')" color="black" label="版权所有 ICP证：沪ICP备16034540号-1" />
            <q-btn fab glossy icon="contact_mail" color="purple" @click="contact = true"/>
          <q-dialog v-model="contact" transition-show="jump-down" transition-hide="jump-up">
      <q-card style="min-width: 350px">
        <q-card-section>
          <div class="text-h6">联系我们</div>
        </q-card-section>
        <q-card-section class="q-pt-none">
          <q-input dense label="称呼" v-model="contactform.name" autofocus @keyup.enter="contactSubmit()" style="padding-bottom: 10px"/>
          <q-input dense label="联系方式" v-model="contactform.mobile" @keyup.enter="contactSubmit()" style="padding-bottom: 25px"/>
          <textarea placeholder="备注信息" v-model="contactform.comments" @keyup.enter="contactSubmit()" style="width: 100%"/>
        </q-card-section>

        <q-card-actions align="right" class="text-primary">
          <q-btn flat label="取消" v-close-popup />
          <q-btn color="primary" label="发送" @click="contactSubmit()"/>
        </q-card-actions>
      </q-card>
    </q-dialog>
          </q-page-sticky>
      <q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
            <q-btn fab icon="keyboard_arrow_up" color="accent" />
          </q-page-scroller>
    </q-page-container>
  </q-layout>
</template>
<style lang="sass">
.my-menu-link
  color: white
  background: #01579b
</style>
<script>
import { post } from 'boot/axios'
import { openURL } from 'quasar'
export default {
  meta: {
    meta: {
      description: { name: 'description', content: '聚商汇--QRCODE生成器' },
      keywords: { name: 'keywords', content: '聚商汇,聚商汇--QRCODE生成器, QRCODE生成器，二维码生成器，二维码生成' },
      equiv: { 'http-equiv': 'Content-Type', content: 'text/html; charset=UTF-8' }
    }
  },
  data () {
    return {
      title: '聚商汇--QRCODE生成器',
      contact: false,
      contactform: {
        name: '',
        mobile: '',
        comments: ''
      },
      electronV: false
    }
  },
  methods: {
    contactSubmit () {
      if (this.contactform.name === '') {
        this.$q.notify({
          message: '称呼不能为空',
          icon: 'close',
          color: 'negative',
          position: 'right',
          timeout: 1500
        })
      } else {
        if (this.contactform.mobile === '') {
          this.$q.notify({
            message: '联系方式不能为空',
            icon: 'close',
            color: 'negative',
            position: 'right',
            timeout: 1500
          })
        } else {
          if (this.contactform.comments === '') {
            this.$q.notify({
              message: '请输入您的需要和我们联系的信息',
              icon: 'close',
              color: 'negative',
              position: 'right',
              timeout: 1500
            })
          } else {
            console.log(this.contactform)
            post('contact', this.contactform).then(response => {
              if (response.data.code === '200') {
                this.contact = false
                this.$q.notify({
                  message: '感谢您的反馈，我们会尽快联系您',
                  icon: 'check',
                  color: 'positive',
                  position: 'right',
                  timeout: 1500
                })
              } else {
                this.$q.notify({
                  message: '或许请求次数过多，或者网络原因引起的提交不成功',
                  icon: 'close',
                  color: 'negative',
                  position: 'right',
                  timeout: 1500
                })
              }
            }).catch(error => {
              console.log(error)
            })
          }
        }
      }
    },
    brownlink (e) {
      openURL(e)
    }
  },
  created () {
    if (this.$q.platform.is.electron) {
      this.electronV = true
    } else {
      this.electronV = false
    }
  },
  mounted () {
  }
}
</script>
